<template>
  <su-page bg="#f7f7f7">
    <su-body>
      <!-- header -->
      <su-white-header v-if="detailData" :title="detailData.gcmc" :prop="detailData.dizhi"></su-white-header>
      <!-- detail -->
      <su-prop-group title="基本信息" v-if="detailData">
        <su-prop label="工程编号">{{detailData.code || ''}}</su-prop>
        <su-prop label="工程地址">{{detailData.dizhi || ''}}</su-prop>
        <su-prop label="工程状态">{{detailData.zhuangtai || ''}}</su-prop>
        <su-prop label="一级分类">{{detailData.fenlei1 || ''}}</su-prop>
        <su-prop label="二级分类">{{detailData.fenlei2 || ''}}</su-prop>
        <su-prop label="招标方式">{{detailData.zhaobiao || ''}}</su-prop>
        <su-prop label="开工时间">{{detailData.kgsj || ''}}</su-prop>
        <su-prop label="竣工时间">{{detailData.jgsj || ''}}</su-prop>
      </su-prop-group>
      <su-prop-group title="其他信息" v-if="detailData">
        <su-prop label="总包单位">{{detailData.jsdw || ''}}</su-prop>
        <su-prop label="项目经理">{{detailData.xmjl || ''}}</su-prop>
        <su-prop label="联系方式">{{detailData.lxfs || ''}}</su-prop>
        <su-prop label="项目监理">{{detailData.jianli || ''}}</su-prop>
        <su-prop label="二级分类">{{detailData.tbsj || ''}}</su-prop>
        <su-prop label="填报时间">{{detailData.tbsj || ''}}</su-prop>
      </su-prop-group>
      <su-prop-group title="现场照片" v-if="detailData">
         <image lazy-load class="su-fit-image" :src="detailData.image" mode="aspectFill"></image>
      </su-prop-group>
      <!-- loading -->
      <su-list-loading :loading="detailLoading"></su-list-loading>
    </su-body>
  </su-page>
</template>

<script>
  /**
   * @description 详情
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        id:'',
        detailData: null,
        detailLoading: false
      }
    },
    computed: {
      ...mapState(['token'])
    },
    onLoad(params) {
      this.id = params.id || ''
      this.getDetail()
    },
    watch: {
      token(newVal) {
        this.getDetail()
      }
    },
    methods: {
      // 获取详情
      getDetail() {
        this.detailLoading = true
        setTimeout(() => {
          this.detailLoading = false
          this.detailData = {
            image:'https://gd-hbimg.huaban.com/94e5cb3568c4d611aac4c7b56c12d4ba66f2567520c55-NZXOlZ_fw480',
            code:'YH2002-2225-0001',
            gcmc:'青武麦海洋工程结构件加工处理厂建设',
            dizhi:'青岛市经济开发区李江东路367号',
            jsdw:'青奥海洋工程建设公司',
            fenlei1:'房屋建筑工程',
            fenlei2:'工业厂房',
            zhaobiao:'直接发包',
            zhuangtai:'在建',
            kgsj:'2022/06/05',
            jgsj:'2023/06/05',
            xmjl:'刘建设',
            lxfs:'1335556666',
            jianli:'青岛安全城建有限公司',
            tbsj:'2022/06/15',
          }
        }, 300)
      }
    },
  }
</script>

<style lang="scss">
</style>
